<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
    <style>
	.avatarImg{
		width: 50%
	}
	.avatar-uploader {
		
	}
    </style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="3">
				<div class="user-img-circle">
				<el-upload
				  class="avatar-uploader"
				  :action="uploadUrl"
				  :show-file-list="false"
				  :on-success="uploadSuccess"
				  :before-upload="beforeUpload">
				  <img v-if="adminForm.adminImg" :src="adminForm.adminImg" class="avatar avatarImg">
				  <i class="el-icon-upload avatar-uploader-icon" style="float: right;"><small>上传</small></i>
				</el-upload>
				<div style=" margin-top:15px">
				<span>欢迎：{{adminForm.adminUser}}</span>
				</div>
				</div>
			</el-col>
			<el-col :span="8">
				<el-form :model="adminForm" :rules="adminRules" ref="adminForm" label-width="100px">
					<el-form-item label="账号信息"></el-form-item>
					<el-form-item label="登录名" prop="adminUser">
						{{adminForm.adminUser}}
					</el-form-item>
					<el-form-item label="昵称" prop="adminName">
						<el-input v-model="adminForm.adminName"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="adminPassword">
						<el-input v-model="adminForm.adminPassword"></el-input>
					</el-form-item>
					<el-form-item label="注册时间">
						{{adminForm.adminTime}}
					</el-form-item>
					<el-form-item>
					    <el-button type="primary" @click="onUpdate">保存修改</el-button>
				  </el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
        uploadUrl: window.location.origin + '/file/upload',
		adminForm:{},
		adminRules: {
          adminUser: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          adminName: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          adminPassword: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        },
	}
	let vueMethods = {
		getInfo() {
			let that = this
			postRequst('/admin/info', null).then(function (resp) {
				that.adminForm = resp.data
			})
		},
		onUpdate() {
			let that = this
			postRequst('/admin/saveInfo', that.adminForm).then(function (resp) {
				if(resp.status == 0){
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
        uploadSuccess(res, file, fileList){
			let that = this
			if(res.status == 0){
				that.adminForm.adminImg = res.data
			}
		},
        beforeUpload(file){
			var img = file.name.substring(file.name.lastIndexOf('.') + 1)
            const suffix = img === 'jpg'
            const suffix2 = img === 'png'
            const suffix3 = img === 'jpeg'
            const suffix4 = img === 'webp'
            const suffix5 = img === 'svg'
            const isLt1M = file.size / 1024 / 1024 < 1;
            if (!suffix && !suffix2 && !suffix3 && !suffix4 && !suffix5) {
                this.$message.error("只能上传图片！");
                return false
            }
            // 可以限制图片的大小
            if (!isLt1M) {
                this.$message.error('上传图片大小不能超过 1MB!');
                return false
            }
            return suffix || suffix2 || suffix3 || suffix4 || suffix5;
		},
	}
	function vueCreated() {
		let that = this
		that.getInfo()
	}

	// 初始化VUE
	new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
</script>

</html>